<template>
  <div class="detail">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="image in detail.photo" :key="image.id">
      <img v-lazy="image.url" />
      </van-swipe-item>
    </van-swipe>
    <div class="title">{{detail.title}}</div>
    <div class="detailInfo">
      <span class="price">￥{{detail.price}}</span>
      <span class="saleNum">月销量：{{detail.saleNum}}</span>
    </div>
    <van-divider>商品图文详情</van-divider>
    <img
      v-for="desc in detail.descContentList"
      :key="desc.image.id"
      :src="desc.image.url"
      alt=""
    >
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="1" @click= " changeCart "/>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="加入购物车"  @click= " addToCartHandler "/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Divider, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'

Vue.use(Lazyload)
Vue.use(Divider)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)

export default {
  name: 'Detail',
  data () {
    return {
      detail: {}
    }
  },
  methods: {
    addToCartHandler () {
      this.$store.commit('addToCart', { id: 1, title: '...' })
    },
    changeCart () {
      this.$router.push({ name: 'cart' })
    }
  },
  created () {
    this.$http.getDetail(this.$route.params.id)
      .then(data => {
        // this.detail = data.detail
        data.detail.descContentList = data.detail.descContentList.filter(item => item.image)
        this.detail = data.detail
      })
  }
}
</script>

<style lang="scss" scoped>
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .title{
    padding: 6px;
  }
  .detailInfo{
    padding: 6px;
    display: flex;
    justify-content: space-between;
    .price{
      color: #f66;
      font-size: 25px;
      font-weight: 600;
      align-self: center;
    }
    .saleNum{
      color: #ccc;
      font-size: 12px;
      align-self: center;
    }
  }
</style>
